<template>
  <div>
    <el-card shadow="hover" class="box-card">

      <el-form label-width="80px" size="small">

        <el-upload
            class="avatar-uploader"
            :action="'http://127.0.0.1:8000/media/icon/微信图片_20230517082052_u2KH5QV.jpg'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess">
          <img v-if="1"
               src="https://img0.baidu.com/it/u=3557428405,4148478111&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
               class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"/>
        </el-upload>
        <!--         <el-avatar shape="square" :size="100" :fit="fit" src=""></el-avatar>-->

        <el-form-item label="用户名" style="margin-left: 200px; margin-top: -140px">
          <el-input v-model="user.username"  autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="真名" style="margin-left: 200px">
          <el-input v-model="user.name" autocomplete="off"  style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="用户类型" style="margin-left: 200px">
          <el-input v-model="this.user_type" autocomplete="off"  style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="性别" style="margin-left: 200px">

          <el-select v-if="this.gender" v-model="man" placeholder="请选择您的性别" style="width: 400px" >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱"  style="margin-left: 200px">
          <el-input v-model="email" autocomplete="off"  style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="电话" style="margin-left: 200px">
          <el-input v-model="this.mobile" autocomplete="off"   style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="地址" style="margin-left: 200px">
          <el-input type="textarea" v-model="address" autocomplete="off"  style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">修改</el-button>
          <el-button type="success" @click="sign"><i class="el-icon-location"/>定位</el-button>
          <el-button type="warning" @click="LoginOut"><i class="el-icon-location"/>退回首页</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script>
// 引入去除空格工具
import {validUsername} from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    return {
      form: {},
      user: '',
      man:'男',
      woman:'女',
      email:'123456@qq.com',
      address:'浦东老男孩',

      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      value: ''
    }
  },
  mounted() {

    // // 获取地理位置
    // var geolocation = new BMapGL.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     const province = r.address.province
    //     const city = r.address.city
    //     localStorage.setItem("location", province + city)
    //   }
    },


  created() {
     // 在组件创建时从sessionStorage中获取头像链接
    this.avatarUrl = sessionStorage.getItem('icon');
    this.gender = sessionStorage.getItem('gender');
    this.user_type = sessionStorage.getItem('user_type');
    this.mobile = sessionStorage.getItem('mobile');
    this.avatarUrl = JSON.parse(this.avatarUrl);
    this.user_type = JSON.parse(this.user_type);
    this.mobile = JSON.parse(this.mobile);
    this.user = sessionStorage.getItem('user');
    console.log('link>>>>>>>>>>',this.user)
    console.log('link>>>>>>>>>>', this.avatarUrl)
    this.user = JSON.parse(this.user);
    console.log('link>>>>>>>>>>', this.user.username)
    this.load()

  },
  methods: {
    load() {
      const username = this.user.username
      console.log(username)
      if (!username) {
        this.$message.error("当前无法获取用户信息!请登录!")
        return
      }
      // this.request.get("/user/username/" + username).then(res => {
      //   // console.log(res)
      //   this.form = res.data
      // })
    },
    sign() {
      const location = localStorage.getItem("location")
      const username = this.user.username

      this.request.post("/sign", {user: username, location: location}).then(res => {
        if (res.code === '200') {
          this.$message.success("打卡成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    save() {
      this.request.post("/user", this.form).then(res => {
        if (res.data) {
          this.$message.success("保存成功")
          this.load()

          this.$emit('refreshUser')
        } else {
          this.$message.error("保存失败")
        }
      })
    },
    // 头像上传
    handleAvatarSuccess(res) {
      // res就是头像文件路径
      this.form.avatarUrl = ''
    },

    // 退出到首页
    LoginOut(){
      this.$router.push({
              path: "/",
            });
    }
  }
}


</script>

<style lang="scss">
body {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #f0f6ee;
  //background-image: url("https://img0.baidu.com/it/u=2337983454,4265724516&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500");
  //  background-size: cover;
}


.avatar-uploader {
  text-align: left;
  padding-top: 20px;
  padding-left: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #eabdbd;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}

.avatar {
  width: 160px;
  height: 160px;
  display: block;
}



//设置卡片的样式
.box-card {
  width: 800px;
  height: 500px;
  margin-left: 200px;
  margin-top: 50px;
  //position: absolute;
  //left: 50%;
  //top: 50%;
  //padding: 10px;
  background-color: rgba(255, 255, 255, 0.6); //设置透明度
  //transform: translate(-50%, -50%);
}


</style>